<template>
  <div>
    <!-- search-bar 开始 -->
    <div class="search-bar">
      <van-row class="g-ta--c">
        <van-col span="3">
          <a href="javascript:;" class="m-btn-locationfill">
            <svg class="icon icon-c--white" aria-hidden="true">
              <use xlink:href="#icon-locationfill"></use>
            </svg>
          </a>
        </van-col>
        <van-col span="16">
          <input type="text" class="search-input" placeholder="查找">
        </van-col>
        <van-col class="g-ta--c" span="5">
          <van-button size="small">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- search-bar 结束 -->
    <!-- swiper area 开始 -->
    <van-swipe class="m-swipe" :autoplay="3000">
      <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
        <img v-lazy="banner.image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品分类栏 开始 -->
    <div class="m-type-bar">
      <a href="javascript:;" class="m-type-bar_link" v-for="(cate,index) in category" :key="index">
        <img v-lazy="cate.image" width="90%" />
        <span>{{cate.mallCategoryName}}</span>
      </a>
    </div>
    <!-- 商品分类栏 结束 -->
    <!-- 广告Banner的布局 开始 -->
    <div>
      <img v-lazy="adBanner" width="100%" />
    </div>
    <!-- 广告Banner的布局 结束 -->
  </div>

</template>

<script>
export default {
  data() {
    return {
      msg: "Shopping Mall",
      // 图片引入用require，build的时候不会丢失图片。
      // locationIcon: require("../../assets/images/location_fill.png"),
      bannerPicArray: [],
      category: [],
      adBanner: ""
    };
  },
  created() {
    this.axios
      .get("/api/getIndex")
      .then(response => {
        console.log(response);
        if (response.status == 200) {
          this.bannerPicArray = response.data.data.slides;
          this.category = response.data.data.category;
          this.adBanner = response.data.data.advertesPicture.PICTURE_ADDRESS; //获得广告图片
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style lang="scss" scoped>
.search-bar {
  height: 2.2rem;
  background-color: #e5017d;
  line-height: 2.2rem;
}

.search-input {
  font-size: 12px;
  width: 100%;
  height: 1.3rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  color: #fff;
}

.m-btn-locationfill {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}

.m-swipe {
  clear: both;
  max-height: 9rem;
  overflow: hidden;
  img {
    width: 100%;
  }
}

.m-type-bar {
  background-color: #fff;
  margin: 0 0.3rem 0.3rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  .m-type-bar_link {
    flex: 1;
    padding: 0.3rem;
    font-size: 12px;
    text-align: center;
    color: #455a64;
    text-decoration: none;
    &:hover {
      opacity: 0.75;
    }
    &:active {
      span {
        color: #000;
      }
    }
  }
  img {
    width: 100%;
  }
  span {
    display: block;
    text-align: center;
  }
}
</style>
